{% extends "others/other_index.html" %}
{% load staticfiles %}
{% block content %}
    <style>
        .btn {

        }

        .addr {
            background-color: green;
            text-align: center;
            height: 42px;
            cursor: pointer;
            line-height: 42px;
        !important;
        }

        .addr:hover {
            background-color: darkgreen;
        !important;
        }

        .list-group-item {
            text-align: center
        }

        .d {
            width: 30%;
            margin-left: 2%;
            margin-bottom: 2%;
            display: inline-block;
            background-color: lightgray;
        }

        .f {
            height: 350px;
            overflow: auto
        }

        .list {
            margin-top: 5px;
            margin-left: 20%;
            font-size: 2rem;
        }

        .remove {
            float: right;
            color: orangered;
            margin-right: 1%;
            cursor: pointer
        }

        #myModal input {
            background-color: ghostwhite;
            border: 1px solid lightskyblue;
            border-radius: 6px;
            margin-top: 1%
        }

        #myModal input:hover {
            border: 1px solid blue
        }
    #myModal2 input {
            background-color: ghostwhite;
            border: 1px solid lightskyblue;
            border-radius: 6px;
            margin-top: 1%
        }

        #myModal2 input:hover {
            border: 1px solid blue
        }
    .radio{width: 20px;height: 28px;}

    </style>

    <section style="width: 94%;margin: auto;margin-bottom: 3%">


        <a href="/other/index/">
            <button type="button" class="btn btn-primary btn-lg" style="width: 200px;
            margin-top: 10px;
            margin-bottom: 15px;">返回
            </button>
        </a>

        <section>
            <div class="d">
                <a style="border-radius: 0;text-align: center" href="#" class="list-group-item active a">
                    部门
                </a>
                <div class="f">
                    {% for i in all_d %}
                        <li class="list-group-item">{{ i.name }}
                            {% if i.status == 1 %}
                            <span name="1{{ i.id }}" data-toggle="modal" data-target="#myModal"
                                                                                class="remove">禁用</span>
                            {% else %}
                            <span name="1{{ i.id }}" data-toggle="modal" data-target="#myModal"
                                                                                class="remove">启用</span>
                            {% endif %}
                        </li>
                    {% endfor %}
                </div>
                <p class=" addr" name="1" data-toggle="modal" data-target="#myModal2" style="color: white">新增</p>
            </div>


            <div class="d">
                <a style="border-radius: 0;text-align: center" href="#" class="list-group-item active a">
                    职位
                </a>
                <div class="f">
                    {% for i in all_p %}
                        <li href="#" class="list-group-item">{{ i.name }}
                            {% if i.status == 1 %}
                            <span name="2{{ i.id }}" data-toggle="modal" data-target="#myModal"
                                                                                class="remove">禁用</span>
                            {% else %}
                            <span name="2{{ i.id }}" data-toggle="modal" data-target="#myModal"
                                                                                class="remove">启用</span>
                            {% endif %}
                        </li>

                    {% endfor %}
                </div>
                <p class=" addr" name="2" data-toggle="modal" data-target="#myModal2" style="color: white">新增</p>
            </div>

            <div class="d">
                <a style="border-radius: 0;text-align: center" href="#" class="list-group-item active a">
                    论坛资源
                </a>
                <div class="f">
                    <a href="#" class="list-group-item">查询最新</a>

                </div>
                <p class=" addr" style="color: white">新增</p>
            </div>
        </section>
    </section>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
         style="margin-top: 10%">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" style="text-align: center">是否禁用/启用?</h4>
                </div>

                <div style="margin-top: 10px; ">

                    <div class="a list">
                        <label for="adress">输入管理员密码：</label>
                        <input type="password" name="psw" id="psw" required>
                    </div>

                    <p style="text-align: center;color: red;" id="error"></p>

                    <div class="modal-footer" style="text-align: center;margin-top: 20px;">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" id="yes" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    {#  新增页面  #}
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
         style="margin-top: 10%">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" style="text-align: center">新增项目</h4>
                </div>

                <form action="/other/ziyuan/add/" method="post" style="margin-top: 10px; ">
                    <div class="a list">
                        <label for="lastname">类型</label>
                        <div style="display: inline-block; margin-left: 20px;">
                            <label class="radio-inline ">
                                <input type="radio" name="type" class="radio" id="optionsRadios5" value="1"> 部门
                            </label>
                            <label class="radio-inline ">
                                <input type="radio" name="type" class="radio" id="optionsRadios6" value="2"> 职位
                            </label>
                        </div>
                    </div>
                    <div class="a list">
                        <label for="adress">名称：</label>
                        <input type="text" name="title" required id="adress" value="">
                    </div>
                    <div class="a list">
                        <label for="lastname">是否启用</label>
                        <div style="display: inline-block; margin-left: 20px;">
                            <label class="radio-inline ">
                                <input type="radio" name="status" class="radio" id="optionsRadios3" value="1" checked> 是
                            </label>
                            <label class="radio-inline ">
                                <input type="radio" name="status" class="radio" id="optionsRadios4" value="0"> 否
                            </label>
                        </div>
                    </div>
                        {% if error %}
                            <p style="text-align: center"></p>
                        {% endif %}
                        <div class="modal-footer" style="text-align: center;margin-top: 20px;">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">确定</button>
                        </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script src="{% static 'js/jquery.js' %}"></script>
    <script>
        $('.remove').each(function () {
           $(this) .click(function () {
               var name = $(this).attr('name');
               $('#yes').attr('name',name)
           })
        });
        $('#yes').click(function () {
            var tid = $(this).attr('name');
            var psw = $('#psw').val();
            if (psw == ''){
                $('#error').html('请输入密码');
                return null
            }
            settings = {
            url:"/other/ziyuan/update/",
            type:"POST",
            data:{"tid":tid,"psw":psw},
            success:function(data){
                if (data.data.status == 1){
                    window.location.reload();
                }else{
                    $('#error').html(data.data.error);
                }
            }
        };
        $.ajax(settings);
        });

        $('.addr').each(function () {
            $(this).click(function () {
                {#$('#optionsRadios5').attr('checked','False')#}
                {#$('#optionsRadios6').attr('checked','False')#}
                var name = $(this).attr('name');
                if (name == '1'){
                    $('#optionsRadios5').attr('checked','True');
                    {#$('#optionsRadios6').attr('checked','False')#}
                } else{
                    $('#optionsRadios6').attr('checked','True');
                    {#$('#optionsRadios5').attr('checked','False')#}
                }
            })
        })
    </script>
{% endblock %}